<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test" @click="$router.push('/index')"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
            <!-- 
                使用自定义组件，我们给自定义组件设置的属性(除子组件中的props中的属性外)，
                会自动成功自定义组件根标签的属性

                v-model:
                    作用1：双向绑定vue变量和表单元素的value属性
                    作用2：监听到输入框的input事件，
                           并且会将事件传递过来的数据同步v-model绑定的变量
             -->        
            <hmInput ref="username" v-model="user.username" 
            placeholder="请输入手机号" 
            :reg="/^1[3,4,5,6,7,8,9]\d{9}$/" 
            ></hmInput>
            <hmInput ref="password" v-model="user.password" :reg="/^.{3,10}$/" type="password" placeholder="请输入密码" ></hmInput>
            <!-- <input placeholder="请输入手机号" class="input">
            <input placeholder="密码" class="input" type="password"> -->
        </div>
        <p class="tips">
            没有账号？
            <a href="#/register" class="">去注册</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <van-button @click="loginFn" icon="star-o" type="danger" round  block>登录</van-button>
    </div>
</div>
</template>

<script>
import { login } from "../api/user.js"
export default {
    data(){
        return {
            user: {
                username: "13243234552",
                password: ""
            }
        }
    },
    methods:{
        // 登录
        loginFn(){
            // 添加判断，判断用户输入内容是否合法，根据什么来判断呢？答：可以根据封装组件中的isOk属性进行判断
            // isOk的值为true表示，输入内容正确，否则输入内容错误
            // 如何获取到isOk呢？
            // 答: 通过ref属性获取到组件对象，然后再通过组件对象获取到里面的isOk属性
            // let nameIsOk = this.$refs.username;
            // console.log(53,nameIsOk.isOk);
            if(!this.$refs.username.isOk){
                this.$toast.fail("手机号码输入不正确，请检查！");
                return
            }
            if(!this.$refs.password.isOk){
                this.$toast.fail("密码必须3到10位数，请检查！");
                return
            }
            login(this.user).then(res=>{
                console.log(49,res);
                if(res.data.message == "登录成功"){
                    // alert(res.data.message);
                    this.$toast.success(res.data.message);
                    // 保存token和用户id
                    localStorage.setItem("hm-token-71",res.data.data.token);
                    localStorage.setItem("hm-id-71", res.data.data.user.id);
                    // 跳转到首页
                    this.$router.push("/index");
                }else{
                    // alert(res.data.message);
                    this.$toast.fail(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>